<template>
  <div>
    <el-form ref="pram" :model="pram" :rules="rules" label-width="80px" @submit.native.prevent>
      <el-form-item label="留言">
      <div>{{message}}</div>
      </el-form-item>
      <el-form-item label="回复" prop="reply_content">
        <el-input v-model="pram.reply_content" maxlength="150" placeholder="回复" type="textarea" :rows="4"/>
      </el-form-item>
    </el-form>
    <div class="btn-box">
      <el-button type="primary" @click="handlerSubmit('pram')" v-hasPermi="['admin:message:info']">确定</el-button>
      <el-button @click="close">取消</el-button>
    </div>
  </div>
</template>

<script>
import Tinymce from '@/components/Tinymce/index'
import * as noticeApi from '@/api/noticeApi.js'
import * as systemSetting from '@/api/systemSetting.js'
import {getToken} from "@/utils/auth";
import {Debounce} from '@/utils/validate'
import Templates from "../appSetting/wxAccount/wxTemplate/index";
import * as messageApi from '@/api/message'
export default {
  // name: "edit"
  components: { Templates, Tinymce},
  props: {
    editData: {
      type: Object,
      default: () => {
        return { rules: [] }
      }
    }
  },
  data() {
    return {
      isDisabled: this.$route.params.isDisabled==='1'?true:false,
      constants:this.$constants,
      activeName:"first",
      otherInfoVisible: false,
      pram: {
        reply_content:'',
        id: 0,
      },
      rules: {
        reply_content: [{ required: true, message: '请填回复内容', trigger: ['blur', 'change'] }],
      },
      myHeaders: { "X-Token": getToken() },
      message:''
    }
  },
  mounted() {
    this.initEditData()
  },
  methods: {
    handleChange(){},
    close() {
      this.$emit('hideEditDialog')
    },

    initEditData() {
      const { reply_content, id ,content} = this.editData //通过list中slot-scope=“scope“，scope.$index就是该行的下标，scope.row就是该行的数据所有消息对象，有了这两个参数就可以实现编辑、删除功能（this.editData就是scope.row传入的对象参数）
      this.pram.reply_content = reply_content
      this.pram.id = id
      this.message=content
    },
    handlerSubmit:Debounce(function(form) {
      this.$refs[form].validate(valid => {
        if (!valid){
          setTimeout(() => {
            //使用定时器，防止出发此处判断__error时验证器的__error的class还未添加
            //console.log(document.getElementsByClassName('el-form-item__error').length)
            if (document.getElementsByClassName('el-form-item__error').length > 0) {
              let errorNode = document.getElementsByClassName('is-error')[0];//$('.is-error')
              //console.log(errorNode.parentNode.id)
              //如果html结构变了此处需要检查是否多级parentNode
              if (errorNode.parentNode.id === "pane-second") {
                this.activeName = "second"
                this.otherInfoVisible = true
              } else if (errorNode.parentNode.id === "pane-first") {
                this.activeName = "first"
                this.otherInfoVisible = false
              }
            }
          }, 200);
          return
        }
          this.handlerSave()
      })
    }),
    handlerSave() {
      messageApi.doAdd(this.pram).then(data => {
        this.$message.success('回复成功')
        this.$emit('hideEditDialog')
      })
    },
  }
}
</script>

<style scoped lang="scss">
.pictrue{
  width: 150px;
  height: 150px;
  border: 1px dotted rgba(0,0,0,0.1);
  margin-right: 10px;
  position: relative;
  cursor: pointer;
  img{
    width: 100%;
    height: 100%;
  }
  video{
    width: 100%;
    height: 100%;
  }
}
.rich-content{
  width:99%;
  ::v-deep.el-form-item__content{
    margin-left:10px!important;
  }
}
</style>
